<template>
	<view class="content">
		<addr-search edit="true" @soso="soKeyword" :keyword="keyword"></addr-search>
		<view class="history">
			<view class="title">
				<view class="name">
					历史记录
				</view>
				<view class="hsz" @tap="clearKeyword()">
					<view class="uni-icon">&#xe60a;</view>
				</view>
			</view>
			<view class="items">
				<view class="item" v-for="(item,index) of history" :key="index" @tap="addKeyword(item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="activitys">
			<view class="item"><activity3></activity3></view>
			<view class="item"><activity3></activity3></view>
			<view class="item"><activity3></activity3></view>
			<view class="item"><activity3></activity3></view>
			<view class="item"><activity3></activity3></view>
		</view>
	</view>
</template>

<script>
	import AddrSearch from '../../components/addr_search.vue'
	import Activity3 from '../../components/activity3.vue'
	export default {
		name: 'Search',
		data: function () {
			return {
				history: [],
				keyword: ''
			};
		},
		methods: {
			// 点击搜索进入这里
			soKeyword(keyword) {
				this.keyword = keyword
				if (keyword.trim() == '')
					return;
				if (this.history.indexOf(keyword.trim()) < 0) { // 没有改关键字
					// 添加关键字
					this.history.unshift(keyword)
					//添加历史记录
					uni.setStorage({
						key: 'keyword',
						data: JSON.stringify(this.history),
						success: function () {
							console.log(' setStorage + success');
						}
					});
				}


			},
			// 把关键字输入到搜索框
			addKeyword(keyword) {
				this.keyword = keyword
			},
			clearKeyword() {
				uni.removeStorage({
					key: 'keyword',
					success: (res) =>{
						this.history = []
					}
				});
			},
		},
		created() {
			// 获取历史搜索关键字
			uni.getStorage({
				key: 'keyword',
				success: (res) => {
					if (res.data)
						this.history = JSON.parse(res.data)
				}
			});
		},
		components: {
			AddrSearch,
			Activity3,
		}
	}
</script>

<style scoped>
	.history {
		padding: 30px;
		background: #fff;
	}

	.history .title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;
	}

	.items {
		display: flex;
		flex-wrap: wrap;
	}

	.items .item {
		padding: 15px 30px;
		margin: 10px;
		border: 1px solid #eee;
		font-size: 25px;
	}
	.activitys .item{
		margin-top: 25px;
	}
</style>
